<template>
  <div class="comments-container">
    <h2 class="section-title">商品评价管理</h2>
    
    <!-- 搜索和筛选区域 -->
    <div class="action-bar">
      <el-input 
        v-model="searchQuery" 
        placeholder="搜索商品名称" 
        style="width: 220px;" 
        clearable 
        @keyup.enter="searchComments"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      
      <el-select v-model="filterRating" placeholder="评分筛选" clearable style="width: 120px; margin-left: 10px;">
        <el-option label="全部评分" value=""></el-option>
        <el-option label="5星" value="5"></el-option>
        <el-option label="4星" value="4"></el-option>
        <el-option label="3星" value="3"></el-option>
        <el-option label="2星" value="2"></el-option>
        <el-option label="1星" value="1"></el-option>
      </el-select>
      
      <el-button type="primary" @click="searchComments" style="margin-left: 10px;">搜索</el-button>
      <el-button @click="resetFilter">重置</el-button>
    </div>
    
    <!-- 评价列表表格 -->
    <el-table :data="commentsList" stripe style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
      <el-table-column label="商品图片" width="100">
        <template #default="scope">
          <el-image 
            style="width: 60px; height: 60px" 
            :src="getImageUrl(scope.row.productImage)" 
            :preview-src-list="[getImageUrl(scope.row.productImage)]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="120"></el-table-column>
      <el-table-column label="评分" width="120">
        <template #default="scope">
          <div class="rating-display">
            <el-rate 
              v-model="scope.row.rating" 
              disabled 
              show-score 
              text-color="#ff9900"
            ></el-rate>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="评价内容"></el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button 
            type="danger" 
            size="small" 
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import * as api from '@/assets/js/api';

// 响应式数据
const commentsList = ref([]);
const loading = ref(true);
const searchQuery = ref('');
const filterRating = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 获取评价列表
async function getCommentsList() {
  loading.value = true;
  try {
    // 构建查询参数
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value
    };
    
    if (searchQuery.value) {
      params.query = searchQuery.value;
    }
    
    if (filterRating.value) {
      params.rating = filterRating.value;
    }
    
    // 调用API获取评价列表
    // 注意：这里需要后端提供对应的API接口
    // 假设API为 api.getProductAppraises(params)
    const result = await api.getProductAppraises(params);
    
    if (result.code === 200) {
      commentsList.value = result.data.records;
      total.value = result.data.total;
    } else {
      ElMessage.error('获取评价列表失败：' + result.message);
    }
  } catch (error) {
    console.error('获取评价列表出错：', error);
    ElMessage.error('获取评价列表失败，请稍后重试');
  } finally {
    loading.value = false;
  }
}

// 搜索评价
function searchComments() {
  currentPage.value = 1;
  getCommentsList();
}

// 重置筛选条件
function resetFilter() {
  searchQuery.value = '';
  filterRating.value = '';
  currentPage.value = 1;
  getCommentsList();
}

// 处理删除评价
function handleDelete(row) {
  ElMessageBox.confirm(
    `确定要删除这条评价吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      // 调用删除API
      // 注意：这里需要后端提供对应的API接口
      // 假设API为 api.deleteProductAppraise(id)
      const result = await api.deleteProductAppraise(row.id);
      
      if (result.code === 200) {
        ElMessage.success('删除成功');
        getCommentsList(); // 刷新列表
      } else {
        ElMessage.error('删除失败：' + result.message);
      }
    } catch (error) {
      console.error('删除评价出错：', error);
      ElMessage.error('删除失败，请稍后重试');
    }
  }).catch(() => {
    // 取消删除
  });
}

// 处理分页大小变化
function handleSizeChange(size) {
  pageSize.value = size;
  getCommentsList();
}

// 处理页码变化
function handleCurrentChange(page) {
  currentPage.value = page;
  getCommentsList();
}

// 获取图片完整URL
function getImageUrl(imagePath) {
  if (!imagePath) return '';
  return `http://localhost:8080${imagePath}`;
}

// 组件挂载时获取数据
onMounted(() => {
  getCommentsList();
});
</script>

<style scoped>
.comments-container {
  padding: 20px;
}

.section-title {
  margin-bottom: 20px;
  font-size: 22px;
  color: #303133;
}

.action-bar {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.rating-display {
  display: flex;
  align-items: center;
}
</style>